<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
</head>
<style>
    table {
        width: 500px;
        border-collapse: collapse;
        border: 1px solid #666666;
    }

    td {
        border: 1px solid #666666;

    }

    i {
        display: inline-block;
        margin-left: 10px;
        margin-top: 6px;
        width: 16px;
        height: 16px;
        background: url('./jiantou.svg');
        background-size: contain;
        /* transform: rotate(180deg); */
    }

    .even {
        background: violet;
    }

    .desc {
        transform: rotate(180deg);
    }
</style>

<body>
    <div id="root">
        <input type="text" v-model="addname"><button @click="add">add</button><br>
        <table>
            <thead>
                todoList
            </thead>
            <tr>
                <td>
                    <label for="input">全选</label>
                    <input type="checkbox" @click="allcheck" v-model="ischicked">
                </td>
                <td style="width: 50px;">ID <i @click="sort" :class="isdesc?'':'desc'"></i></td>
                <td>item</td>
                <td>操作</td>
            </tr>
            <tr v-for=" c,index in getlist" :class="index%2?'':'even'">
                <td><input type="checkbox" v-model="c.chicked" @change="isallcheck"></td>
                <td>
                    {{c.id}}
                </td>
                <td>
                    <span v-if="!c.status">{{c.name}}</span>
                    <input type="text" v-if="c.status" v-model="c.name">
                </td>

                <td>
                    <button v-if="!c.status" @click="update(c.id,index)">编辑</button>
                    <button v-if="!c.status" @click="del(index)">删除</button>
                    <button v-if="c.status" @click="submit(c.id)">提交</button>
                </td>
            </tr>
        </table>
        <br>
        <button @click="alldel">删除</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                ischicked: false,//全选按钮
                isdesc: true,//desc 、 asc
                addname: '',
                datalist: [
                    { id: 1, name: '北京', status: false, isdel: false, chicked: false },
                    { id: 2, name: '天津', status: false, isdel: false, chicked: false },
                    { id: 3, name: '上海', status: false, isdel: false, chicked: false }
                ]
            },
            computed: {
                getlist() {
                    if (this.datalist.length == 0) {
                        this.ischicked = false;
                    }
                    let list = this.datalist.filter((item) => {
                        return !item.isdesc;
                    })
                    return list.sort((a, b) => {
                        if (this.isdesc) {
                            return a.id - b.id;
                        } else {
                            return b.id - a.id;
                        }
                    })
                }

            },
            methods: {
                alldel() {
                    var ind = [];
                    this.datalist.forEach((item, index) => {
                        if (!item.chicked) {
                            ind.push(item)
                        }
                    })
                    return this.datalist = ind;
                },
                allcheck() {
                    if (!this.ischicked) {//
                        this.datalist.forEach((item) => {
                            item.chicked = true;

                        })
                    } else {
                        this.datalist.forEach((item) => {
                            item.chicked = false;
                            item.isdel = true;
                        })
                    }
                },
                isallcheck() {
                    let all = 0;
                    this.datalist.forEach((item) => {
                        if (!item.chicked) {
                            all++;//勾上的个数
                        }
                        if (all == 0) {
                            this.ischicked = true;
                        } else {
                            this.ischicked = false;
                        }
                    })
                },
                sort() {
                    this.isdesc = !this.isdesc;
                },
                add() {
                    return this.datalist.push({
                        id: new Date().getTime(),
                        name: this.addname,
                        status: false
                    })
                },
                del(index) {
                    return this.datalist.splice(index, 1)
                },
                update(id, index) {
                    return this.datalist[index].status = true;
                },
                submit(id) {
                    this.datalist.forEach((item, index) => {
                        if (item.id == id) {
                            let o = Object.assign({}, item, { status: false });
                            Vue.set(this.datalist, index, o);
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>